import { observer } from 'mobx-react-lite';
import Navbar from '@/components/Navbar';
import systemStore from '@/stores/SystemStore';
import { Image, Text, View } from '@tarojs/components';
import './index.less';
import ComplaintCard from '@/components/ComplaintCard';
import ComplaintImg from '@/static/images/icon/complaint.png';
import { navigateTo } from '@tarojs/taro';
import userStore from '@/stores/UserStore';
import ComplaintBusiness from '@/business/ComplaintBusiness';
import authStore from '@/stores/AuthStore';
import AuthConstant from '@/constant/AuthConstant';
import BusinessConstant from '@/constant/BusinessConstant';
import { useState, useEffect } from 'react';
import { ComplaintEntity } from '@/entities/ComplaintEntity';
import Forbid from '@/static/images/icon/forbid.png';

const ComplaintList = () => {
  const [complaintList, setComplaintList] = useState<ComplaintEntity.IComplaint[]>();

  /**
   * 获取投诉建议的列表
   */
  const getComplaintList = async () => {
    const complaintId = userStore.user?.id;
    let identity = -1;
    if (authStore.identity === AuthConstant.TENANT) {
      identity = BusinessConstant.COMPLAINT_TENANT;
    } else if (authStore.identity === AuthConstant.LANDLORD) {
      identity = BusinessConstant.COMPLAINT_LANDLORD;
    }
    const res: any = await ComplaintBusiness.getComplaint(complaintId, identity);
    setComplaintList(res);
  };

  useEffect(() => {
    getComplaintList();
  }, []);

  const toWriteComplaint = () => {
    navigateTo({
      url: '/pages/complaint/index'
    });
  };

  return (
    <Navbar
      mode='back'
      title='投诉建议'
      bgColor='var(--mini-first)'
    >
      <View className='complaint-list-container' style={ {height: systemStore.haveNavbarNotTabbarHeight} }>
        {
          complaintList?.length ?
            complaintList?.map((complaint: ComplaintEntity.IComplaint) => {
              return (
                <ComplaintCard
                  key={ complaint.id }
                  status={ complaint.status }
                  reason={ complaint.reason }
                  createdAt={ complaint.createdAt }
                  updatedAt={ complaint.updatedAt }
                  images={ JSON.parse(complaint.image) }
                  video={ complaint.video }
                />
              );
            }) :
            (
              <View className='no-complaint-application'>
                <Image src={ Forbid } className='forbid-icon'/>
                <Text>暂无投诉记录</Text>
              </View>
            )
        }
        <View
          className='write-complaint'
          onClick={ toWriteComplaint }
        >
          <Image src={ ComplaintImg } className='img'/>
        </View>
      </View>
    </Navbar>
  );
};

export default observer(ComplaintList);